<template>
  <div>
    <!-- 幻灯片 开始 -->
    <el-carousel indicator-position="outside" height="500px">
      <el-carousel-item v-for="banner in bannerList" :key="banner.id">
        <a target="_blank" :href="banner.linkUrl">
          <img :src="banner.imageUrl" :alt="banner.title" />
        </a>
      </el-carousel-item>
    </el-carousel>
    <!-- 幻灯片 结束 -->

    <!-- 路线 开始 -->
    <div id="aCoursesList">
      <div>
        <section class="container">
          <header class="comm-title">
            <h2 class="tac">
              <span class="c-333">热门路线</span>
            </h2>
          </header>

          <div>
            <article class="comm-course-list">
              <ul class="of" id="bna">
                <li v-for="route in routeList" :key="route.id">
                  <div class="cc-l-wrap">
                    <section class="course-img">
                      <img :src="route.cover" class="img-responsive" :alt="route.title" />
                      <div class="cc-mask">
                        <a href="/demand" title="免费咨询" class="comm-btn c-btn-1">免费咨询</a>
                      </div>
                    </section>
                    <h3 class="hLh30 txtOf mt10">
                      <a
                        :href="'/route/' + route.id"
                        :title="route.title"
                        class="course-title fsize18 c-333"
                      >{{route.title}}</a>
                    </h3>
                    <section class="mt10 hLh20 of">
                      <span class="fr jgTag bg-green">
                        <i class="c-fff fsize12 f-fA">hot</i>
                      </span>
                      <span class="fl jgAttr c-ccc f-fA">
                        <i class="c-999 f-fA">{{route.day}}天</i>
                        |
                        <i class="c-999 f-fA">￥{{route.price}}起</i>
                        |
                        <i class="c-999 f-fA">已售:{{route.buyCount}}</i>
                      </span>
                      <button class="goshop" @click="buy(route.id)">立即购买</button>
                    </section>
                  </div>
                </li>
              </ul>
              <div class="clear"></div>
            </article>
            <section class="tac pt20">
              <!-- <a href="/route" title="全部路线" class="comm-btn c-btn-2">全部路线</a> -->
              <router-link to="/route" tag="li" active-class="current">
                <a class="comm-btn c-btn-2">全部路线</a>
              </router-link>
            </section>
          </div>
        </section>
      </div>
      <!-- /路线 结束 -->
      <!-- <el-divider></el-divider> -->

      <!-- 定制师 开始 -->
      <div>
        <section class="container">
          <header class="comm-title">
            <h2 class="tac">
              <span class="c-333">定制师推荐</span>
            </h2>
          </header>
          <div>
            <article class="i-teacher-list">
              <ul class="of">
                <li v-for="advisor in advisorList" :key="advisor.id">
                  <section class="i-teach-wrap">
                    <div class="i-teach-pic">
                      <a href="/teacher/1" :title="advisor.name">
                        <img :alt="advisor.name" :src="advisor.avatar" />
                      </a>
                    </div>
                    <div class="mt10 hLh30 txtOf tac">
                      <a
                        href="/teacher/1"
                        :title="advisor.name"
                        class="fsize18 c-666"
                      >{{advisor.name}}</a>
                    </div>
                    <div class="hLh30 txtOf tac">
                      <span class="fsize14 c-999">{{advisor.level==1?"高级定制师":"首席定制师"}}</span>
                    </div>
                    <div class="mt15 i-q-txt">
                      <p class="c-999 f-fA">{{advisor.intro}}</p>
                    </div>
                  </section>
                </li>
              </ul>
              <div class="clear"></div>
            </article>
            <section class="tac pt20">
              <router-link to="/demand" tag="li" active-class="current">
                <a class="comm-btn c-btn-2">联系定制师</a>
              </router-link>
            </section>
          </div>
        </section>
      </div>
      <!-- /定制师 结束 -->
    </div>
  </div>
</template>
<script>
import banner from "@/api/banner.js";
import index from "@/api/index.js";
export default {
  data() {
    return {
      swiperOption: {
        //配置分页
        pagination: {
          el: ".swiper-pagination", //分页的dom节点
        },
        //配置导航
        navigation: {
          nextEl: ".swiper-button-next", //下一页dom节点
          prevEl: ".swiper-button-prev", //前一页dom节点
        },
      },
      bannerList: [],
      advisorList: [],
      routeList: [],
    };
  },
  created() {
    this.getBannerList();
    this.getIndexRoute();
    this.getIndexAdvisor();
  },
  methods: {
    buy(id){
      this.$router.push({path:"/route/" + id})
    },
    //获取首页热门路线
    getIndexRoute() {
      index.getIndexRoute().then((response) => {
        this.routeList = response.data.data.routeList;
      });
    },
    //获取首页名师列表
    getIndexAdvisor() {
      index.getIndexAdvisor().then((response) => {
        this.advisorList = response.data.data.advisorList;
      });
    },
    //获取banner列表
    getBannerList() {
      banner.getBannerList().then((response) => {
        //注意这里需要点两次data，具体可以尝试console数据出来看看
        //在guli-admin里面只需要点一次是因为那个框架里面已经封装过了
        this.bannerList = response.data.data.bannerList;
      });
    },
  },
};
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>